<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bg-box {
            background: url("https://images.xaaef.com/1de5159fb88f492a666a1976f5495f43.jpg");
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            min-width: 1000px;
            z-index: -10;
            zoom: 1;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
        }

        .login {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .login_container {
            padding: 20px 30px;
            background: rgba(0, 0, 0, 0.3);
        }

        .login_titles {
            margin-bottom: 10px;
            text-align: center;
            font-size: 22px;
            color: #eee;
        }

        .login_user {
            position: relative;
            margin: 20px 0;
        }

        .login_user img {
            position: absolute;
            height: 20px;
            top: 50%;
            left: 8px;
            transform: translateY(-50%);
        }

        .login_user input {
            outline: none;
            border: none;
            padding: 7px 0px 7px 35px;
            width: 300px;
            font-size: 18px;
            opacity: 0.4;
        }

        .login_remenber input {
            outline: none;
            border: none;
            opacity: 0.7;
            vertical-align: middle;
        }

        .login_submit div {
            cursor: pointer;
            background: cadetblue;
            opacity: 0.8;
            text-align: center;
            color: white;
            font-size: 18px;
            height: 40px;
            line-height: 40px;
            margin: 10px 0;
        }

        .login_message div {
            background: red;
            opacity: 0.8;
            text-align: center;
            color: white;
            font-size: 18px;
            font-weight: bold;
            height: 30px;
            line-height: 30px;
            margin: 10px 0;
            display: none;
            transition: 2s;
        }

        .login_message {
            -webkit-animation: login_message 2s linear;
            -moz-animation: login_message 2s linear;
            animation: login_message 2s linear;
        }

        @-webkit-keyframes login_message {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }

        }
    </style>
</head>

<body>
<div class="bg-box"></div>
<div class="login">
    <div class="login_container">
        <div class="login_titles">OAuth2.0 Server 登录页面</div>
        <div class="login_message">
            <div id="login_message">提示信息</div>
        </div>
        <div class="login_user">
            <img src="./img/user.png">
            <input id="username" type="text" placeholder="请输入用户名">
        </div>
        <div class="login_pwd login_user">
            <img src="./img/pwd.png">
            <input id="password" type="text" placeholder="请输入密码">
        </div>
        <div id="login" class="login_submit">
            <div>登陆</div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    // 验证码的 key
    const codeKey = randomCodeKey();
    // 一个随机的 授权ID，由系统随机生成，绑定给每个前来授权的第三方应用，主要用来连贯用户一些列操作！
    const codeId = [[${codeId}]];
    let message = document.getElementById("login_message")

    // 消息提示
    function msg(show, color, txt) {
        message.style.display = show;
        message.style.background = color;
        message.innerText = txt;
    }

    // 随机 生成 18位 字符串
    function randomCodeKey() {
        var s = []
        var hexDigits = '0123456789abcdefghijklmnopqrstuvwxyz'
        for (var i = 0; i < 24; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
        }
        s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
        return s.join('')
    }

    $(function () {
        $("#login").click(function () {
            let username = $("#username").val();
            let password = $("#password").val();
            let codeText = "dwad";
            if (!username || !password) {
                msg("block", "red", "用户名或密码为空");
            }
            if (username.length >= 3 && password.length >= 3) {
                let params = {
                    codeId: codeId,
                    username: username,
                    password: password,
                    codeKey: codeKey,
                    codeText: codeText,
                }
                console.log('params :>> ', params);
                $.ajax({
                    type: "POST",
                    url: "/login",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(params),
                    success: function (response) {
                        if (response.status === 200) {
                            location.href = response.data
                        } else {
                            msg("block", "red", response.message)
                        }
                    }
                });
            } else {
                msg("block", "red", "用户名或密码长度不够！");
            }
        })

        $("#code_img").click(function () {
            let r = Math.ceil(Math.random() * 10000);
            let imageUrl = `/captcha/codes/${codeKey}?r=${r}`
            $("#code_img").attr("src", imageUrl)
        })

    })
</script>
</body>

</html>